<script setup lang="ts">
import {
  NDataTable,
  useMessage,
  NSpace,
  NModal,
  NImage,
  NIcon,
  NPopover,
  NInput,
  NButton,
  NSpin,
  NEllipsis,
  NForm,
  NFormItem,
  NScrollbar,
  type FormInst,
  type DataTableColumns
} from 'naive-ui'
import { ChevronLeft12Filled, ChevronRight12Filled } from '@vicons/fluent'
import { h, ref, reactive, onMounted, watch, nextTick, defineComponent } from 'vue'
import { format, subDays, addDays } from 'date-fns'
import { sendRequest } from '@/utils/api'
import { useRoute, useRouter } from 'vue-router'
import { usePermissionStore } from '@/stores/permission'
import type { DisModel } from '@/api/receiveOrDispatch'
import type { carlistModel } from '@/api/office'
import type { HttpResponsePagination } from '@/utils/http'
import type { HttpResponse } from '@/utils/http'
import outPng from '@/assets/images/outPng.png'
import inPng from '@/assets/images/inPng.png'
import book from '@/assets/images/02@2x.png'
import laba from '@/assets/images/01@2x.png'
import labaYellow from '@/assets/images/notice_yellow.gif'
import PlanUpdate from './PlanUpdate.vue'
import ModalCard from '@/components/ModalCard.vue'
import { ArrowForwardIosRound, SearchFilled, PriorityHighRound } from '@vicons/material'
const type = import.meta.env.VITE_TYPE
import { RecordType } from '@/router/utils'
import defaultAvatar from '@/assets/images/default_avatar.png'


interface ModalForm {
  morning: string
  afternoon: string
  allDay: string
  workTime: string
  timeType: number
}
const router = useRouter()
const message = useMessage()
const qdVisible = ref(false)
const reminderContent = ref()
const reminderCpVisible = ref(false)
const reminderContentCp = ref()
const columnsCopy: any = ref([])
const endData = ref()
const addPlanVisible = ref(false)
const changeBu = ref(false)
const timeData = ref()
const reminderVisible = ref(false)
const birthdayVisible = ref(false)
const modalForm = ref({} as ModalForm)
const configData = ref()
const examineData = ref([])
const rightCount = ref(1)
const route = useRoute()
const realList: any = ref([])
const detailInfo: any = reactive({})
const rightListFirst: any = ref([])
const tableData = ref()
const loading = ref(false)
const startData = ref()
const spinShow = ref(false)
const rightTitle = ref()
const rightSelectFirst = ref(4)
const { stagingFlag } = usePermissionStore()
const jumpRouterList: any = ref([])
const birthInput: any = ref(null)

const columns: DataTableColumns<any> = [
  {
    title: '',
    key: 'week',
    width: 150,
    align: 'center',
    render(e) {
      const { workTime, week } = e
      return h(
        NSpace,
        {
          inline: true,
          vertical: true,
          style: 'line-height: 1'
        },
        {
          default: () => [h('span', null, week), h('span', null, `（${workTime.slice(5)}）`)]
        }
      )
    }
  },
  {
    title: '上午',
    key: 'morning',
    align: 'center',
    cellProps: (e) => ({
      style: {
        backgroundColor: '#d9e6d9',
        borderRight: e.timeType !== 0 ? '1px solid #ffffff' : 'none'
      },
      onClick: () => {
        addPlanVisible.value = true
        modalForm.value = {
          morning: e.morning,
          afternoon: e.afternoon,
          allDay: e.allDay,
          workTime: e.workTime,
          timeType: e.timeType
        }
      }
    }),
    colSpan: (rowData) => (rowData.timeType == 0 ? 2 : 1),
    render: (e) => (e.timeType == 0 ? e.allDay : e.morning) || ''
  },
  {
    title: '下午',
    key: 'afternoon',
    align: 'center',
    cellProps: (e) => ({
      style: {
        backgroundColor: '#d9e6d9'
      },
      onClick: () => {
        addPlanVisible.value = true
        modalForm.value = {
          morning: e.morning,
          afternoon: e.afternoon,
          allDay: e.allDay,
          workTime: e.workTime,
          timeType: e.timeType
        }
      }
    })
  }
]
// 签到or签出
const changeStatus = async (val: any) => {
  const [error, res] = await sendRequest({
    module: 'selfDesktop',
    api: val == 1 ? 'operateqd' : 'operateqc'
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  qdVisible.value = false
  val == 1
    ? message.success(
      '签到成功，签到时间' + format(new Date(), 'yyyy-MM-dd HH:mm:ss').split(' ')[1],
      {
        // @ts-ignore
        style: { marginTop: '40vh' }
      }
    )
    : message.success(
      '签出成功，签出时间' + format(new Date(), 'yyyy-MM-dd HH:mm:ss').split(' ')[1],
      {
        // @ts-ignore
        style: { marginTop: '40vh' }
      }
    )
  queryconfigINfoData()
}
// 签到签出后的点击提示
const alertTips = async (val: any, time: any) => {
  if (val == 1) {
    time
      ? message.success('您已于 ' + time.split(' ')[1] + ' 成功签到', {
        // @ts-ignore
        style: { marginTop: '40vh' }
      })
      : message.error('签到失败', {
        // @ts-ignore
        style: { marginTop: '40vh' }
      })
  } else
    message.error('签出失败，请先签到', {
      // @ts-ignore
      style: { marginTop: '40vh' }
    })
}
// 用户info
const queryconfigINfoData = async () => {
  const [error, res] = await sendRequest<HttpResponsePagination<carlistModel[]>>({
    module: 'selfDesktop',
    api: 'selfDesktopInfo'
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  Object.keys(res.data)?.map((it) => {
    //@ts-ignore
    detailInfo[it] = res.data?.[it]
  })
  const tmp = new Date().getHours()
  if (!(13 <= tmp && tmp <= 15)) detailInfo?.qd ? changeStatus(1) : ''
  if (detailInfo?.leader) (changeBu.value = true), queryplan(true)
  else (changeBu.value = false), queryplan(false)
}
// 链接数据
const queryconfigListData = async () => {
  const [error, res] = await sendRequest<HttpResponsePagination>({
    module: 'selfDesktop',
    api: 'configList',
    override: {
      params: {
        page: 1,
        limit: 12
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)

  if (res.data.list) {
    res.data.list.forEach((e) => {
      if (!e.url) return
      const route = router.resolve(new URL(e.url, import.meta.url).hash.slice(1))
      if (router.hasRoute(route.name!)) e.route = route
    })
  }

  configData.value = res.data?.list
}
// 获取日期周结束日期（周一为每周的开始，周日为每周的结束）
function beginOfWeek(dateValue: any) {
  let date
  if (dateValue instanceof Date) {
    date = dateValue
  } else {
    date = new Date(dateValue)
  }
  let subDay = 0
  let weekDay = date.getDay()
  if (weekDay == 0) {
    subDay = 6 //周天
  } else {
    subDay = weekDay - 1
  }
  let beginDateTime = date.getTime() - 86400000 * subDay
  return new Date(beginDateTime)
}
// 获取日期周结束日期（周一为每周的开始，周日为每周的结束）
function endOfWeek(dateValue: any) {
  let date
  if (dateValue instanceof Date) {
    date = dateValue
  } else {
    date = new Date(dateValue)
  }
  let weekDay = date.getDay()
  if (weekDay == 0) {
    return date //周天
  } else {
    let addDay = 7 - weekDay
    let endDateTime = date.getTime() + 86400000 * addDay
    return new Date(endDateTime)
  }
}
// 个人工作台  false个人工作台
const queryplan = async (type: any) => {
  loading.value = true
  const [error, res] = await sendRequest({
    module: 'selfDesktop',
    api: !type ? 'planPersonList' : 'planleadList',
    override: {
      params: {
        endTime: endData.value,
        startTime: startData.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  loading.value = false
  if (!type) tableData.value = res.data
  else {
    tableData.value = res.data?.list
    columnsCopy.value = [
      {
        title: '',
        key: 'week',
        width: 150,
        align: 'center',
        render(e: any) {
          const { workTime, week } = e
          return h(
            NSpace,
            {
              inline: true,
              vertical: true,
              style: 'line-height: 1'
            },
            {
              default: () => [h('span', null, week), h('span', null, `（${workTime.slice(5)}）`)]
            }
          )
        }
      },
      {
        title: res.data?.nameList[0],
        key: 'workPlan1',
        align: 'center',
        cellProps: () => ({
          style: {
            backgroundColor: '#d9e6d9',
            borderRight: '1px solid #ffffff',
            textAlign: 'left'
          }
        }),
        render: (e: any) => {
          return e?.workPlan1
            ? e?.workPlan1.indexOf('下午') != -1
              ? toBr(e?.workPlan1)
              : e?.workPlan1
            : ''
        }
      },
      {
        title: res.data?.nameList[1],
        key: 'workPlan2',
        align: 'center',
        cellProps: () => ({
          style: {
            backgroundColor: '#d9e6d9',
            borderRight: '1px solid #ffffff',
            textAlign: 'left'
          }
        }),
        render: (e: any) => {
          return e?.workPlan2
            ? e?.workPlan2.indexOf('下午') != -1
              ? toBr(e?.workPlan2)
              : e?.workPlan2
            : ''
        }
      },
      {
        title: res.data?.nameList[2],
        key: 'workPlan3',
        align: 'center',
        cellProps: () => ({
          style: {
            backgroundColor: '#d9e6d9',
            textAlign: 'left'
          }
        }),
        render: (e: any) => {
          return e?.workPlan3
            ? e?.workPlan3.indexOf('下午') != -1
              ? toBr(e?.workPlan3)
              : e?.workPlan3
            : ''
        }
      }
    ]
  }
}

const PlanContent = defineComponent({
  render() {
    return h(
      'div',
      {
        class: 'planContent'
      },
      this.$slots.default?.()
    )
  }
})

//上下午工作安排分开
const toBr = (val: any) => {
  const tmp: any = val?.split('下午:')
  return h(
    'div',
    {},
    {
      default: () => [
        h(
          PlanContent,
          {
            style: {
              display: tmp[0]?.replace('上午:', '') ? 'block' : 'none'
            },
            'data-desc': '· 上午：'
          },
          { default: () => (tmp[0]?.replace('上午:', '') ? tmp[0].replace('上午:', '') : '') }
        ),
        h(
          PlanContent,
          {
            style: {
              display: tmp[1]?.replace('下午:', '') ? 'block' : 'none'
            },
            'data-desc': '· 下午：'
          },
          {
            default: () => (tmp[1]?.replace('下午:', '') ? tmp[1] : '')
          }
        )
      ]
    }
  )
}

// 下一周
const subWeek = () => {
  startData.value = format(subDays(new Date(startData.value), 7), 'yyyy-MM-dd')
  endData.value = format(subDays(new Date(endData.value), 7), 'yyyy-MM-dd')
  queryplan(changeBu.value)
}
// 上一周
const addWeek = () => {
  startData.value = format(addDays(new Date(startData.value), 7), 'yyyy-MM-dd')
  endData.value = format(addDays(new Date(endData.value), 7), 'yyyy-MM-dd')
  queryplan(changeBu.value)
}
// 修改右侧个数
const changeRight = (flat: any) => {
  spinShow.value = true
  if (rightCount.value == 1 && flat) return (spinShow.value = false)
  if (Math.ceil(rightListFirst.value.length / 3) == rightCount.value && !flat)
    return (spinShow.value = false)
  !flat ? (rightCount.value += 1) : (rightCount.value -= 1)
  if (rightCount.value == 1) {
    spinShow.value = false
    return (realList.value = rightListFirst.value.slice(0, 3))
  }
  realList.value = rightListFirst.value.slice((rightCount.value - 1) * 3, rightCount.value * 3)
  spinShow.value = false
}

// 获取当前用户分身
// 机要：con
// 部门负责人：dep
// 普通员工：other
//nodeType : completed(未流转) / pending(已流转)
const userType: any = ref('')
const queryUser = async () => {
  const [error, res] = await sendRequest({
    module: 'readingandprocessing',
    api: 'userInfo'
  })
  if (error) return message.error(error.message)
  if (res.code) return message.error(res.msg)
  userType.value = res.data
}

//阅办待办面板
const queryReadingList = async () => {
  await queryUser()
  if (userType.value == 'con') {
    const [error, res] = await sendRequest({
      module: 'readingandprocessing',
      api: 'listWait',
      override: {
        params: {
          // flowStatus: 'pending',
          page: 1,
          limit: 99999,
          titleCommunication: rightTitle.value
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg), (spinShow.value = false)
    rightListFirst.value = []
    res.data.list?.map((i: any) => {
      rightListFirst.value.push({
        title: i.titleCommunication,
        postId: i.id,
        publishTime: i.nodeTime,
        flag: 1
      })
    })
    realList.value = rightListFirst.value.slice(0, 3)
  } else {
    const [error, res] = await sendRequest({
      module: 'readingandprocessing',
      api: 'List',
      override: {
        params: {
          isProcess: 0,
          page: 1,
          limit: 99999,
          titleCommunication: rightTitle.value
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg), (spinShow.value = false)
    rightListFirst.value = []
    res.data.list?.map((i: any) => {
      rightListFirst.value.push({
        title: i.titleCommunication,
        postId: i.id,
        publishTime: i.nodeTime,
        flag: 1
      })
    })
    realList.value = rightListFirst.value.slice(0, 3)
  }
}
// 获取列表
const getReceiveList = async () => {
  realList.value = []
  rightCount.value = 1
  spinShow.value = true
  if (rightSelectFirst.value == 4) {
    await queryReadingList()
    spinShow.value = false
  } else {
    const [error, res] = await sendRequest<HttpResponse<DisModel>>({
      module: 'receiveOrDispatch',
      api: 'receiveList',
      override: {
        params: {
          page: 1,
          limit: 10000,
          type:
            rightSelectFirst.value == 1 ? 'A0201' : rightSelectFirst.value == 2 ? 'A0203' : 'A0202',
          title: rightTitle.value
        }
      }
    })
    if (error) return message.error(error.message), (spinShow.value = false)
    if (res.code !== 0) return message.error(res.msg), (spinShow.value = false)
    rightListFirst.value = res.data.list
    console.log(rightListFirst.value)
    realList.value = rightListFirst.value.slice(0, 3)
    spinShow.value = false
  }
}
// 阅办待办
const getReceiveListA = async () => {
  spinShow.value = true
  await queryReadingList()
  if (realList.value.length) {
    rightSelectFirst.value = 4
  } else {
    rightSelectFirst.value = 1
    getReceiveList()
  }
  spinShow.value = false
}
// 待我处理列表columns
const examineColumns: any = [
  {
    title: '部门',
    key: 'deptName',
    width: type == 'pad' ? 55 : 70,
    render(row: any) {
      return h(
        'div',
        { style: { display: 'flex', height: 'auto' } },
        {
          default: () => [
            h(NImage, {
              previewDisabled: true,
              style: { width: '20rem', height: '20rem', marginRight: '5rem' },
              src: book
            }),
            h(NEllipsis, { display: 'flex', alignItems: 'center' }, { default: () => row.deptName })
          ]
        }
      )
    }
  },
  {
    title: '申请人',
    key: 'createBy',
    width: type == 'pad' ? 45 : 30,
    align: 'center',
    ellipsis: {
      tooltip: {
        contentStyle: {
          maxWidth: '400rem'
        }
      }
    }
  },
  {
    title: '流程类型',
    key: 'codeName',
    width: 60,
    align: 'center',
    ellipsis: {
      tooltip: {
        contentStyle: {
          maxWidth: '400rem'
        }
      }
    }
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 30,
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {
            RecordType.setRouteNameTypeTrue(row.code)
            const path = jumpRouterList.value.find((it: any) => it.code == row.code)?.routeOne
            if (path)
              router.push({ path, query: { id: row.resourceId as never, flat: true as never } })
            else message.error('功能正在开发中')
          }
        },
        {
          default: () => '详情'
        }
      )
    ]
  }
]
// 获取待我处理列表
const getExamineList = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'userCenter',
    api: 'emaineList',
    override: {
      params: {
        page: 1,
        limit: 10000
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  examineData.value = res.data.list.slice(0, 3)
}
// 获取需要跳转的路由
const getJumpRouterList = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'userCenter',
    api: 'getJumpRoute'
  })
  if (error) return
  if (res.code != 0) return
  jumpRouterList.value = res.data
}
// 弹窗提醒需要处理事项
const getReminderInfo = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'userCenter',
    api: 'reminderInfo'
  })
  if (error) return
  if (res.code != 0) return
  if (res.data.popUpFlag) reminderVisible.value = true
  reminderContent.value = res.data.content

  const [errorCp, resCp] = await sendRequest<HttpResponse>({
    module: 'userCenter',
    api: 'getCollectionPopUpReminderInfo'
  })
  if (errorCp) return
  if (resCp.code != 0) return
  if (resCp.data.length) reminderCpVisible.value = true
  reminderContentCp.value = resCp.data
}
// 公告翻页
const cutRightSelect = (val: any) => {
  rightSelectFirst.value = val
  rightCount.value = 1
  rightTitle.value = null
  getReceiveList()
}
// 发送生日祝福
const formRef = ref<FormInst | null>(null)
const birthInfo: any = ref()
const birthdaySubmit = () => {
  formRef.value?.validate(async (err) => {
    if (err) return
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'office',
      api: 'sendBlessings',
      override: {
        data: {
          birthday: birthInfo.value.birthday,
          blessing: birthInfo.value.blessing,
          userId: birthInfo.value.userId
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code != 0) return message.error(res.msg)
    message.success('发送祝福成功')
    birthInfo.value.blessing = null
    birthdayVisible.value = false
  })
}
// 获取即将生日人员列表
const birthdayList: any = ref([])
const getComingBirthdayList = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'office',
    api: 'getComingBirthdayList'
  })
  if (error) return
  if (res.code != 0) return
  birthdayList.value = res.data
}

watch(
  () => route,
  () => {
    if (route.path == '/OA/Workbench/UserDesktop') {
      getExamineList()
      getReceiveList()
      // 更新用户信息
      queryconfigINfoData()
    } else {
      rightTitle.value = null
      rightSelectFirst.value = 1
    }
  },
  { deep: true, immediate: true }
)

onMounted(async () => {
  setInterval(() => {
    timeData.value = format(new Date(), 'yyyy-MM-dd HH:mm:ss')
  }, 1000)
  startData.value = format(beginOfWeek(new Date()), 'yyyy-MM-dd')
  endData.value = format(endOfWeek(new Date()), 'yyyy-MM-dd')
  queryconfigINfoData()
  queryconfigListData()
  getJumpRouterList()
  getReminderInfo()
  getReceiveListA()
  getComingBirthdayList()
})

const renderAvatar = () => {
  if(detailInfo && detailInfo.headSculpture) {
    return detailInfo.headSculpture !== '' ? detailInfo.headSculpture : defaultAvatar
  } else {
    return ''
  }
}

</script>

<template>
  <div class="desktop_table">
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; height: 100%">
      <div class="self_area">
        <div style="width: auto; max-width: 90%">
          <div style="
              display: flex;
              gap: 0 15rem;
              margin-bottom: 10rem;
              width: auto;
              justify-content: center;
            ">
            <div style="width: 69rem; height: 69rem">
              <img :src="renderAvatar()" style="width: 100%; border-radius: 50%; height: 100%" />
            </div>
            <div style="flex: 1; overflow: hidden">
              <p class="title">{{ detailInfo?.userName }}</p>
              <p class="departName">
                <NEllipsis>{{ detailInfo?.deptName }}</NEllipsis>
              </p>
            </div>
          </div>
          <div style="width: auto">
            <div style="display: flex">
              <div class="yearDay">
                <span class="yearDay__label" :style="{ fontSize: type == 'pad' ? '18rem' : '' }">
                  剩余年假
                </span>
                <span class="numStyle" :style="{ fontSize: type == 'pad' ? '18rem' : '' }">
                  {{ detailInfo?.annualLeave || 0 }}
                </span>
                <span :style="{ fontSize: type == 'pad' ? '18rem' : '17px' }">天</span>
              </div>
              <div class="yearDay">
                <div v-if="!detailInfo?.leader">
                  <span class="yearDay__label" :style="{ fontSize: type == 'pad' ? '18rem' : '' }">
                    ，可调休</span>
                  <span class="numStyle" :style="{ fontSize: type == 'pad' ? '18rem' : '' }">
                    {{ detailInfo?.compensatoryLeave || 0 }}
                  </span>
                  <span :style="{ fontSize: type == 'pad' ? '18rem' : '17px' }">天</span>
                </div>
                <div v-else :style="{ width: type == 'pad' ? '66px' : '100px' }"></div>
                <n-popover placement="bottom" trigger="hover"
                  v-if="detailInfo?.aboutToExpireCompensatoryLeave != 0 && !detailInfo?.leader">
                  <template #trigger>
                    <NIcon :size="type == 'pad' ? 16 : 20">
                      <PriorityHighRound style="color: red; cursor: pointer" />
                    </NIcon>
                  </template>
                  <NSpace>
                    <span>
                      您有
                      <span style="color: red">
                        {{ detailInfo?.aboutToExpireCompensatoryLeave }}
                      </span>
                      天调休将在{{
                        detailInfo.aboutToExpireCompensatoryLeaveTime
                      }}过期，请尽快使用！
                    </span>
                  </NSpace>
                </n-popover>
              </div>
            </div>
            <div class="timeNow" style="margin: 5px 0">
              {{ timeData }}
            </div>
          </div>
          <div class="with-time">
            <NSpace justify="center" align="center" class="cardGreen">
              <div @click="detailInfo?.qd ? changeStatus(1) : alertTips(1, detailInfo?.qdTime)" style="cursor: pointer">
                <NImage width="18" :preview-disabled="true" style="margin-top: 10rem" :src="inPng" />
                <div>签到</div>
              </div>
            </NSpace>

            <NSpace justify="center" align="center" class="cardGreen">
              <div @click="detailInfo?.qc ? (qdVisible = true) : alertTips(2, detailInfo?.qcTime)"
                style="cursor: pointer">
                <NImage width="18" :preview-disabled="true" style="margin-top: 10rem" :src="outPng" />
                <div>签出</div>
              </div>
            </NSpace>
          </div>
          <div class="with-time" style="margin-top: 5px">
            <div class="timeNow" style="width: 80rem; text-align: center">
              {{ detailInfo?.qdTime?.split(' ')?.[1] }}
            </div>
            <div class="timeNow" style="width: 80rem; text-align: center">
              {{ detailInfo?.qcTime?.split(' ')?.[1] }}
            </div>
          </div>
        </div>
      </div>
      <div class="link_area">
        <div class="top-box">
          <div class="title">常用链接</div>
        </div>
        <div class="link_content" :class="{ isMax: configData?.length > 10 }"
          :style="`--col-count: ${configData?.length > 10 ? '6' : '5'}`">
          <component class="link_item" v-for="e in configData" target="_blank" :key="e.id" :href="e.url"
            :is="e.route ? 'span' : 'a'" @click="e.route && router.push(e.route)">
            <img :src="e.filePath" />
            <span style="margin-left: 0.5em">{{ e.name?.slice(0, 4) }}</span>
          </component>
        </div>
      </div>
      <!-- 公文/会议纪要/公告 -->
      <div class="right1" style="display: flex; flex-direction: column; padding: 10px">
        <div class="top-box">
          <div class="change_bg">
            <div :class="rightSelectFirst == 1 ? 'greenBg' : 'noBg'" @click="cutRightSelect(1)">
              公文
            </div>
            <div :class="rightSelectFirst == 2 ? 'greenBg' : 'noBg'" @click="cutRightSelect(2)">
              会议纪要
            </div>
            <div :class="rightSelectFirst == 3 ? 'greenBg' : 'noBg'" @click="cutRightSelect(3)">
              公告
            </div>
            <div :class="rightSelectFirst == 4 ? 'greenBg' : 'noBg'" @click="cutRightSelect(4)">
              阅办待办
            </div>
          </div>
          <div class="right_Date_Bu">
            <n-popover placement="bottom" trigger="click">
              <template #trigger>
                <NIcon size="24" class="search-icon">
                  <SearchFilled style="color: #6cb187" />
                </NIcon>
              </template>
              <NSpace>
                <NInput v-model:value="rightTitle" clearable placeholder="请输入标题"></NInput>
                <NButton type="primary" ghost @click="getReceiveList">
                  查询
                </NButton>
              </NSpace>
            </n-popover>
            <div class="leftBu" @click="changeRight(true)">
              <ChevronLeft12Filled />
            </div>
            <div class="center_date">{{ rightCount }}</div>
            <div class="rightBu" @click="changeRight(false)">
              <ChevronRight12Filled />
            </div>
          </div>
        </div>
        <div class="bottom-box" style="justify-content: flex-start">
          <template v-if="rightListFirst.length && stagingFlag">
            <NSpin :show="spinShow">
              <div class="bottom-content1 right-first" v-for="(item, index) in realList" :key="index" style="
                  border-bottom: 1px solid #ccc;
                  cursor: pointer;
                  margin-bottom: 10rem;
                  display: flex;
                  flex: 0 0 30%;
                " @click="
                  router.push({
                    path: item.flag
                      ? '/OA/ReadingAndProcessing/ReadingDetail'
                      : '/OA/ReceiveOrDispatch/ReceiveInfo',
                    query: { id: item.postId, receiveId: item.receiveId }
                  })
                  ">
                <div class="rt-content">
                  <NImage style="width: 22rem; height: 22rem" :src="labaYellow" preview-disabled
                    v-if="rightSelectFirst == 4" />
                  <NImage style="width: 18rem; height: 18rem" :src="laba" preview-disabled v-else />
                  <div class="rt-content__title">
                    <NEllipsis>
                      {{ item.title }}
                    </NEllipsis>
                  </div>
                </div>
                <div style="width: auto; font-size: 13px">
                  {{ item.publishTime?.split(' ')[0] || '2023-02-11' }}
                </div>
              </div>
            </NSpin>
          </template>
          <div class="bottom-content1" v-else style="justify-content: center; flex: 1">
            <div style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                  ">
              <div style="width: 50px; height: 50px;">
                <svg viewBox="0 0 36 36" fill="#5fb17f" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z">
                  </path>
                  <path
                    d="M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z">
                  </path>
                </svg>
              </div>
              <span style="font-size: 14rem; width: 50px; margin-right: 3px; color: #97a8be;">
                无数据
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 工作安排 -->
      <div class="date_content">
        <template v-if="stagingFlag">
          <div style="display: flex; justify-content: space-between; margin-bottom: 10rem">
            <div class="change_bg" v-if="!detailInfo?.leader">
              <div :class="!changeBu ? 'greenBg' : 'noBg'" @click="() => {
                changeBu = false
                queryplan(false)
              }
                ">
                个人工作安排
              </div>
              <div :class="changeBu ? 'greenBg' : 'noBg'" @click="() => {
                changeBu = true
                queryplan(true)
              }
                ">
                馆领导一周工作安排
              </div>
            </div>
            <div class="top-box" v-else style="width: auto">
              <div class="title">馆领导一周工作安排</div>
            </div>
            <div class="right_Date_Bu">
              <div class="leftBu" @click="subWeek()">
                <ChevronLeft12Filled />
              </div>
              <div class="center_date">{{ startData }}至{{ endData }}</div>
              <div class="rightBu" @click="addWeek()">
                <ChevronRight12Filled />
              </div>
            </div>
          </div>
          <NDataTable :bordered="false" :columns="!changeBu ? columns : columnsCopy" :data="tableData" flex-height
            style="flex: 1; --n-td-padding: 10rem" />
        </template>
        <div class="bottom-content1" v-else style="justify-content: center; flex: 1">
          <div style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                  ">
            <div style="width: 50px; height: 50px;">
              <svg viewBox="0 0 36 36" fill="#5fb17f" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z">
                </path>
                <path
                  d="M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z">
                </path>
              </svg>
            </div>
            <span style="font-size: 14rem; width: 50px; margin-right: 3px; color: #97a8be;">
              无数据
            </span>
          </div>
        </div>
      </div>
      <div style="width: 29%; height: calc(100% - 302rem)">
        <!-- 待我处理 -->
        <div class="right2" style="display: flex; flex-direction: column; padding-bottom: 10px">
          <div class="top-box" style="margin: 8px 0">
            <div class="title">待我处理</div>
            <div style="color: #6cb187; display: flex; align-items: center; cursor: pointer"
              @click="router.push({ path: '/OA/UserCenter/Examine' })">
              查看全部
              <NIcon>
                <ArrowForwardIosRound />
              </NIcon>
            </div>
          </div>
          <NDataTable style="flex: 1" :bordered="false" :columns="examineColumns" :data="examineData" :pagination="false"
            flex-height></NDataTable>
        </div>
        <!-- 馆内新鲜事 -->
        <div class="right3" style="display: flex; flex-direction: column">
          <div class="top-box" style="height: 50rem">
            <div class="title">馆内新鲜事</div>
          </div>
          <div class="bottom-box" style="justify-content: flex-start;overflow: hidden;">
            <template v-if="stagingFlag && birthdayList?.length">
              <NScrollbar>
                <div class="bottom-content1" style="background-color: #ebeceb; border-radius: 10rem;padding: 11rem;"
                  v-for="(item, index) in birthdayList" :key="index"
                  :style="{ marginBottom: index != birthdayList?.length - 1 ? '10rem' : '0' }">
                  <div class="brithNew">
                    <div style="display: flex; width: auto; align-items: center">
                      <div class="brithImg">
                        <img round :src="item.headSculpture"
                          style="margin-bottom: 1rem; border-radius: 50%; width: 22px; height: 22px" />
                        <div class="brithText">生日</div>
                      </div>
                      <div style="margin-left: 15rem">{{ item.content }}</div>
                    </div>
                    <div class="sendBrith" @click="
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ; (birthdayVisible = true),
                      (birthInfo = item),
                      nextTick(() => birthInput?.blur())
                      ">
                      送祝福
                    </div>
                  </div>
                </div>
              </NScrollbar>
            </template>

            <div class="bottom-content1" v-else style="justify-content: center; flex: 1">
              <div style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                  ">
                <div style="width: 50px; height: 50px; ">
                  <svg viewBox="0 0 36 36" fill="#5fb17f" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z">
                    </path>
                    <path
                      d="M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z">
                    </path>
                  </svg>
                </div>
                <span style="font-size: 14rem; width: 50px; margin-right: 8px; color: #97a8be">
                  无数据
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <NModal :auto-focus="false" v-model:show="addPlanVisible">
    <PlanUpdate @update="queryplan(changeBu)" :value="modalForm" @close="addPlanVisible = false" />
  </NModal>

  <NModal :auto-focus="false" v-model:show="birthdayVisible">
    <ModalCard action @close="; (birthdayVisible = false), (birthInfo.blessing = null)" @submit="birthdaySubmit"
      style="padding: 24rem">
      <div class="birthdayBox">
        <img class="avter" :src="birthInfo.headSculpture" />
        <div style="font-size: 24rem; font-weight: bold; margin: 10rem 0">送祝福啦</div>
        <div>{{ birthInfo.content }}</div>
        <NForm style="width: 100%" ref="formRef" :model="birthInfo">
          <NFormItem path="blessing" :rule="{
            required: true,
            message: '请输入生日祝福',
            trigger: ['input', 'change']
          }">
            <NInput ref="birthInput" show-count maxlength="100" style="min-height: 100rem; margin-top: 10rem"
              type="textarea" v-model:value="birthInfo.blessing" placeholder="请输入生日祝福"></NInput>
          </NFormItem>
        </NForm>
      </div>
    </ModalCard>
  </NModal>

  <NModal :auto-focus="false" v-model:show="qdVisible">
    <ModalCard action @close="qdVisible = false" @submit="changeStatus(2)" style="padding: 24rem">
      <div class="birthdayBox clockOut" style="font-size: 20px">
        当前时间：{{ timeData }}，您确定要签出吗？
      </div>
    </ModalCard>
  </NModal>

  <NModal :auto-focus="false" v-model:show="reminderVisible">
    <div class="reminderBox">
      <div class="reminderContent">
        <span v-if="reminderContent">{{ reminderContent }}</span>
      </div>
      <div style="margin-top: 20px;display: flex;justify-content: center;">
        <NButton style="width: 120rem" @click="reminderVisible = false">
          今日不再提醒
        </NButton>
        <NButton type="primary" style="width: 120rem; margin-left: 20rem"
          @click="; (reminderVisible = false), router.push({ path: '/OA/UserCenter/Examine' })">
          立刻处理
        </NButton>
      </div>
    </div>
  </NModal>

  <NModal :auto-focus="false" v-model:show="reminderCpVisible">
    <div class="reminderBox">
      <div class="reminderContent">
        <template v-if="reminderContentCp?.length">
          <span v-for="(item, index) in reminderContentCp" :key="index">{{ item.content }}</span>
        </template>
      </div>
      <div style="margin-top: 20px;display: flex;justify-content: center;">
        <NButton style="width: 120rem" @click="reminderCpVisible = false">
          今日不再提醒
        </NButton>
      </div>
    </div>
  </NModal>
</template>

<style>
.planContent {
  position: relative;
  padding-left: 50px;
}

.planContent::before {
  content: attr(data-desc);
  position: absolute;
  left: 0;
}
</style>

<style scoped lang="scss">
.reminderBox {
  width: 600rem;
  min-height: 200rem;
  max-height: 400rem;
  display: flex;
  flex-direction: column;
  background-color: #ebeceb;
  padding: 18rem;

  .reminderContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    flex: 1;
  }
}

.reminderContent::-webkit-scrollbar {
  display: none;
}

.birthdayBox {
  width: 400rem;
  height: 400rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ebeceb;
  padding: 18rem;
  text-align: center;

  .avter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rem;
    height: 100rem;
    border-radius: 50%;
    background-color: #5eaf7d;
  }
}

.clockOut {
  width: 400rem !important;
  height: 200rem !important;
}

.desktop_table {
  height: 100%;
  width: 100%;
  background-color: #f0f0ee;

  .title {
    font-size: 24rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .departName {
    font-size: 16rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #666666;
  }

  .self_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 21%;
    height: 282rem;
    background: linear-gradient(180deg, rgba(191, 226, 191, 0.6) 0%, rgba(234, 232, 232, 0.6) 100%);
    padding: 10rem 0;
  }

  .yearDay {
    display: flex;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
    font-size: 20rem;

    .yearDay__label {
      font-size: 17px;
    }

    .numStyle {
      font-family: LEDFont;
      font-weight: 500;
      color: #6cb187;
      font-size: 24rem;
      margin: 0 3px;
    }

    @media screen and (max-width: 1919px) {
      font-size: 18rem;
      margin-top: 0rem;

      .numStyle {
        font-size: 22rem;
      }
    }
  }

  .timeNow {
    font-size: 14rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 0rem;

    &.small {
      text-align: center;
      width: 80rem;
      height: 64rem;
      margin-top: 0;
    }

    @media screen and (max-width: 1919px) {
      margin-top: 0rem;
    }
  }

  .with-time {
    display: flex;
    justify-content: space-between;
    margin-top: 7rem;

    @media screen and (max-width: 1919px) {
      margin-top: 10rem;
    }
  }

  .cardGreen {
    width: 80rem;
    height: 64rem;
    text-align: center;
    background: #d5e7d4;
    color: #5eaf7d;
    border-radius: 4rem;

    @media screen and (max-width: 1919px) {
      width: 80rem;
      height: 75rem;
    }
  }
}

.link_content {
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--col-count), auto);

  @media screen and (max-width: 1919px) {
    gap: 0rem 10rem;
  }

  &.isMax {
    gap: 0rem 15rem;

    .link_item {
      width: 100%;
    }
  }
}

.desktop_panel {
  background-color: #e1e1e1;
  border-radius: 1rem;
  padding: 20rem 20rem;
}

.right1 {
  width: 29%;
  height: 282rem;
  background: #e1e1e1;
  margin-left: 1;
  padding: 0 10rem;
}

.right2 {
  width: 100%;
  height: calc(50% - 5rem);
  margin-bottom: 10rem;
  margin-top: 10rem;
  background: #e1e1e1;
  padding: 0 10rem;
}

.right3 {
  width: 100%;
  height: calc(50% - 5rem);
  background: #e0e0e0;
  padding: 0 10rem;

  .title {
    color: #333333;
    font-size: 20rem;
    position: relative;
    padding-left: 15rem;
  }

  .title::before {
    content: '';
    position: absolute;
    left: 5rem;
    top: 3rem;
    height: 25rem;
    width: 5rem;
    background-color: #5fb17f;
    border-radius: 3rem;
  }
}

.date_content {
  display: flex;
  flex-direction: column;
  width: calc(70%);
  height: calc(100% - 302rem);
  margin-top: 10rem;
  background: #e1e1e1;
  padding: 10rem 20px;
}

.link_area {
  display: flex;
  flex-direction: column;
  width: 48%;
  height: 282rem;
  background: #e1e1e1;
  padding: 20rem 15rem;

  @media screen and (max-width: 1919px) {
    padding: 15rem 10rem;
  }
}

.link_item {
  width: 100rem;
  height: 68rem;
  background: #e6e6e6;
  border-radius: 6rem;
  border: 1rem solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5rem;
  text-decoration: none;
  color: initial;
  font-size: 16rem;
  cursor: pointer;

  @media screen and (max-width: 1919px) {
    width: auto;
    padding-right: 5rem;
  }

  img {
    display: block;
    width: 42rem;
    height: 42rem;
    border-radius: 50%;
  }
}

.change_bg {
  height: 46rem;
  background: #ebeceb;
  border-radius: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10rem;

  &>div {
    white-space: nowrap;
  }

  @media screen and (max-width: 1920px) {
    font-size: 14rem;
    padding: 0 5rem;
  }
}

.brithText {
  padding: 0rem 3rem;
  font-size: 10rem;
  background-color: #e9a829;
  border-radius: 6rem;
  color: #fff;
  zoom: 0.8;
}

.brithNew {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.brithImg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;
  width: 40rem;
  border-radius: 50%;
  height: 40rem;
  justify-content: center;
}

.greenBg {
  width: auto;
  height: 36rem;
  background: #6cb187;
  border-radius: 2rem;
  line-height: 36rem;
  text-align: center;
  cursor: pointer;
  color: white;
  padding: 0 15rem;
}

.noBg {
  cursor: pointer;
  width: auto;
  height: 36rem;
  border-radius: 2rem;
  line-height: 36rem;
  text-align: center;
  padding: 0 15rem;
}

.right_Date_Bu {
  display: flex;
  align-items: center;

  .search-icon {
    margin-right: 1em;
    cursor: pointer;

    @media screen and (max-width: 1919px) {
      margin-right: 5rem;
    }
  }

  div {
    border-radius: 3rem;
    border: 1rem solid #83bd9a;
    background: #d4dcd7;
    color: #83bd9a;
  }

  .center_date {
    width: auto;
    height: 25rem;
    font-size: 14rem;
    line-height: 25rem;
    margin-left: 5rem;
    margin-right: 5rem;
    padding: 0 10rem;
  }

  .leftBu {
    width: 15rem;
    height: 25rem;
    line-height: 25rem;
    cursor: pointer;
  }

  .rightBu {
    width: 15rem;
    height: 25rem;
    line-height: 25rem;
    cursor: pointer;
  }
}

.sendBrith {
  display: flex;
  align-items: center;
  height: 30rem;
  background-color: #dae4de;
  padding: 5rem 10rem;
  border-radius: 20rem;
  color: #6cb187;
  border: 1px solid #6cb187;
  cursor: pointer;
}

.bottom-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10rem;
}

.bottom-content {
  flex: 0 0 22%;
  align-items: center;
  display: flex;
  padding: 0 10rem;
  justify-content: space-between;
}

.bottom-content1 {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rem;
}

.top-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    color: #333333;
    font-size: 20rem;
    position: relative;
    padding-left: 15rem;
  }

  .title::before {
    content: '';
    position: absolute;
    left: 5rem;
    top: 3rem;
    height: 25rem;
    width: 5rem;
    background-color: #5fb17f;
    border-radius: 3rem;
  }
}

.right-first:hover {
  animation: show 0.3s forwards;
}

.rt-content {
  display: flex;
  align-items: center;
  gap: 0 0.5em;
  font-size: 13px;
  flex: 1;
  overflow: hidden;

  .rt-content__title {
    width: 100%;
    padding-right: 50px;
  }
}

@keyframes show {
  to {
    background-color: #d9e6d9;
  }
}

:deep(.n-data-table .n-data-table-td) {
  padding: 8rem;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.n-data-table-empty) {
  padding: 0;
}

:deep(.n-result .n-result-header .n-result-header__description) {
  color: #97a8be;
}

.container-class {
  background-color: red;
}
</style>
